
import React, { useState, useRef,useEffect } from 'react';
import { Input, Button, Form, Pagination, Empty, Avatar } from "antd";
import styles from "./index.less";
import { SearchOutlined, SwapLeftOutlined, AppstoreFilled, MenuOutlined } from '@ant-design/icons';
import StandardFormRow from '../components/StandardFormRow';
import TagSelect from '../components/TagSelect';
import { connect, Link } from 'umi';
import imgUrl from "@/assets/contactbac.jpg";
import { Icon } from '@ant-design/compatible';
import { province, queryEpPage } from "@/services/basic";
const Company = (props) => {
    const { showWay, dispatch } = props;
    const formRef = useRef();
    const [searchForm, cs] = useState({
        provinceIdList: [],
        companyName: "",
        pageIndex: 1,
        pageSize: 15
    }),
        [provinceList, cpr] = useState([]),
        [companyList, cpl] = useState([]);
    const changeForm = (val, all, type) => {
        if (type == "reset") {
            cs((searchForm) => {
                for (let i in searchForm) {
                    if (i == "pageIndex") {
                        searchForm[i] = 1;
                    } else if (i == "pageSize") {
                        searchForm[i] = 15;
                    } else if (i == "provinceIdList") {
                        searchForm[i] = [];
                    } else {
                        searchForm[i] = ""
                    }
                }
                return { ...searchForm }
            })
            formRef?.current?.resetFields()
        }
        let allValuese = JSON.parse(JSON.stringify(all));
        cs(searchForm => (
            {
                ...searchForm,
                ...allValuese
            }
        ))
    };
    useEffect(() => {
        province({}).then(res => {
            if (res.code == "0000") {
                let list = res?.data?.dataList || [];
                cpr(list)
            }
        })
    }, []);
    useEffect(() => {
        queryEpPage(searchForm).then(res => {
            if (res.code == "0000") {
                let list = res?.data?.page?.list || [];
                cpl(list);
            }

        })

    }, [searchForm]);
    return (
        <div>
            <div className="content">
                <div className="row ">
                    <Input
                        placeholder="请输入关键词搜索"
                        allowClear
                        onChange={(e) => {
                            cs({
                                ...searchForm,
                                companyName: e.target.value
                            })
                        }}
                        prefix={<SearchOutlined style={{ marginLeft: 3 }} />}
                        size="large"
                        value={searchForm.companyName}
                    />
                    <div className="row">
                        <Button size="large" type="primary" style={{ borderRadius: 0 }}>搜索</Button>
                        <Button size="large" style={{ borderRadius: 0 }} onClick={() => {
                            changeForm({}, {}, "reset")
                        }}>重置</Button>
                    </div>
                </div>
                <div className={styles.options}>
                    <Form onValuesChange={changeForm} ref={formRef}>
                        <StandardFormRow
                            title="地区"
                            block
                            style={{
                                border: "none"
                            }}

                        >
                            <Form.Item name="provinceIdList">
                                <TagSelect expandable hideCheckAll={true}>
                                    {
                                        provinceList?.map(el => {

                                            return (
                                                <TagSelect.Option key={el.value} value={el.value}>{el.label}</TagSelect.Option>
                                            )
                                        })
                                    }
                                </TagSelect>
                            </Form.Item>
                        </StandardFormRow>


                    </Form>
                </div>
                {
                    searchForm.companyName &&
                    <div className={styles.result}>
                        <span style={{ marginRight: 20 }}>共找到 12121条</span>
                        <span>搜索关键字：{searchForm.companyName}</span>
                    </div>
                }
            </div>
            <div className={styles.ulBox}>
                {
                    companyList && companyList.length ?
                        <ul className="content" style={{ overflow: "hidden" }}>
                            {
                                companyList.map(it => {
                                    return <li key={it.id} className={styles.liItemRow}>
                                        <Link to="/firm/homepage">
                                            <div className={styles.liDivRow}>
                                                <div className={styles.leftContent}>
                                                    <Avatar
                                                        src={it.url}
                                                        shape="square"
                                                        style={{ borderRadius: 18, marginRight: 15 }}
                                                        size={50}
                                                    />
                                                    <div className={styles.introduce}>
                                                        <div className={styles.leftTitle}>
                                                            <span title={it.companyName} className={styles.title}>{it.companyName}</span>
                                                            <Icon type="sketch" style={{ color: "#ff4800", marginRight: 3 }} />
                                                            <span style={{ color: "#ff4800" }}>{it.levelName}</span>
                                                        </div>
                                                        <div className={styles.oneLine}>
                                                            <span>主营产品：</span>
                                                            <span title={it.categoryList?.map(it=>it.productCategoryName).join("、")}>{it.categoryList?.map(it=>it.productCategoryName).join("、")}</span>
                                                        </div>
                                                        <div className={styles.oneLine}>
                                                            <span>供应产品：</span>
                                                            <span>{it.productNum}</span>
                                                        </div>
                                                        <div className={styles.oneLine}>
                                                            <span>公司地址：</span>
                                                            <span title={it.detailAddress}>{it.detailAddress}</span>
                                                        </div>
                                                        <div className={styles.oneLine}>
                                                            <span>注册年限：</span>
                                                            <span>{it.registerYear}</span>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div className={styles.rightContent}>
                                                    {
                                                        it?.productList?.map((item,i) => {
                                                            return <div className={styles.imgBox} style={{background:`url(${item.productImageUrlList && item.productImageUrlList.length ? item.productImageUrlList[0].url : require("@/assets/default.png")}) no-repeat`,backgroundSize:"contain"}} key={i}>
                                                               
                                                                <div className={styles.imgInBox}>
                                                                    <span style={{ color: `${item.isDiscuss == 1 ? "#bbb" :"#ff4800" }` }}>￥：{item.isDiscuss == 1 ? "面议" : `￥${item.minPrice}`}</span>
                                                                    <div title={item.productName} className={styles.oneLine} style={{ fontSize: 12, color: "#000" }}>{item.productName}</div>
                                                                </div>
                                                            </div>
                                                        })

                                                    }

                                                </div>
                                            </div>
                                        </Link>
                                    </li>
                                })
                            }
                        </ul>

                        :
                        <Empty description="暂无数据" />
                }
            </div>

            <div className={`${styles.page} content rowcenter`}>
                <Pagination
                    total={85}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共 ${total} 条`}
                    onChange={(page, pageSize) => {
                        cs({
                            ...searchForm,
                            pageSize,
                            pageIndex: page
                        })
                    }}
                    pageSize={searchForm.pageSize}
                    current={searchForm.pageIndex}
                />
            </div>


        </div>

    )
}

export default connect(({ global }) => ({
    showWay: global.showWay
}))(Company)